<template>
  <div class="ChargerDetail">
    <van-nav-bar safe-area-inset-top placeholder title="XB123456789" left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <van-icon name="setting-o" size="24" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <div class="myyuanpan">
        <div class="myyuanpan_text_1_b">{{Math.abs(inverter) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_1_t">{{$t('Inverter')}}</div>
        <div class="myyuanpan_text_2_b">{{Math.abs(feedin) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_2_t">{{$t('Feedin')}}</div>
        <div class="myyuanpan_text_3_b">{{Math.abs(loadPower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_4_b">{{Math.abs(otherLoad) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_4_t">Other Load</div>
        <div class="myyuanpan_text_5_b">{{Math.abs(chargePower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_5_t">EV Charger</div>
        <div class="settingBox" v-if="chargeStatus==1||chargeStatus==2" @click="setting()">
          <div class="icon"><van-icon name="setting-o" size="18" color="#078208" /></div>
        </div>

        <div class="Z1" v-if="flow[0]"><img src="../../assets/Z1.gif" alt=""/></div>
        <div class="F1" v-if="flow[1]"><img src="../../assets/F2.gif" alt=""/></div>
        <div class="Z2" v-if="flow[2]"><img src="../../assets/Z2.gif" alt=""/></div>
        <div class="F2" v-if="flow[3]"><img src="../../assets/F2.gif" alt=""/></div>
        <div class="Z3" v-if="flow[4]"><img src="../../assets/Z2.gif" alt=""/></div>
        <div class="F3" v-if="flow[5]"><img src="../../assets/F2.gif" alt=""/></div>
        <div class="Z4" v-if="flow[6]"><img src="../../assets/Z4.gif" alt=""/></div>
        <div class="F4" v-if="flow[7]"><img src="../../assets/Z2.gif" alt=""/></div>
      </div>
      <van-row class="bottomBox">
          <van-col span="12" class="col_l">
            <div class="homeBox_content">
              <div class="tit_1">Connect Status</div>
              <div class="tit_2_sitedetail idle" v-if="chargeStatus==0">空闲</div>
              <div class="tit_2_sitedetail connect" v-if="chargeStatus==1">连接</div>
              <div class="tit_2_sitedetail charging" v-if="chargeStatus==2">充电</div>
              <div class="tit_2_sitedetail charging" v-if="chargeStatus==3">充满</div>
              <div class="tit_2_sitedetail Done" v-if="chargeStatus==4">故障</div>
              <div class="tit_2_sitedetail idle" v-if="chargeStatus==5">远程升级</div>
              <div class="tit_2_sitedetail idle" v-if="chargeStatus==100">离线</div>
              <div class="tit_1">Charge Mode</div>
              <div class="tit_3_sitedetail"><span v-if="chargeMode==0">GREEN</span><span v-if="chargeMode==1">ECO</span><span v-if="chargeMode==2">FAST</span><span v-if="chargeMode==3">STOP</span></div>
            </div>
          </van-col>
          <van-col span="12" class="col_r">
            <div class="homeBox_content">
              <div class="tit_1">Charge Energy</div>
              <div class="tit_3_sitedetail">{{chargeEnergy | units('kWh',2)}}</div>
              <div class="tit_1">Duration</div>
              <div class="tit_3_sitedetail">{{chargeDuration}}</div>
            </div>
          </van-col>
      </van-row>
      <div class='echarts-goto-box' @click="goDetail()">
        <div class="txt">History</div>
        <div class="icon_2"><van-icon name="arrow" /></div>
      </div>
    </van-pull-refresh>
    <!-- 设置 -->
    <van-overlay :show="showsetting" @click="showsetting = false"></van-overlay>
    <div class="wrapper" v-if="showsetting">
        <div class="modeBox">
          <div class="innerBox">
            <div class="ECO">ECO</div>
            <div class="GREEN">GREEN</div>
            <div class="STOP">STOP</div>
            <div class="FAST">FAST</div>
            <div class="mode_1" v-if="mode==2">
              <div class="ECO_t">ECO</div>
            </div>
            <div class="mode_2" v-if="mode==3">
              <div class="GREEN_t">GREEN</div>
            </div>
            <div class="mode_3" v-if="mode===0">
              <div class="STOP_t">STOP</div>
            </div>
            <div class="mode_4" v-if="mode==1">
              <div class="FAST_t">FAST</div>
            </div>
            <div class="click1" @click="getMode(2)"></div>
            <div class="click2" @click="getMode(3)"></div>
            <div class="click3" @click="getMode(0)"></div>
            <div class="click4" @click="getMode(1)"></div>
          </div>
        </div>
    </div>
    <div class="boostBox" v-if="showsetting">
      <div class="mode_t">
        <van-cell title="Boost Mode">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-switch v-model="checkBoost" @click="updateBoost" size="24px" />
          </template>
        </van-cell>
      </div>
      <div class="mode_t" v-if="checkBoost">
        <van-radio-group v-model="boostMode">
          <van-cell-group>
            <van-cell title="Timer Boost" clickable @click="setTime('1')">
              <template #label>{{startTimeValue}}-{{endTimeValue}}</template>
              <template #right-icon>
                <van-radio name="1" checked-color="#7BFFEC" />
              </template>
            </van-cell>
            <van-cell title="Smart Boost" clickable @click="setTime('2')">
              <template #label>
                <div>Charge Energy {{Set_EQValue}}Kwh</div>
                <div class="margin">End Time {{Set_TimeValue}}</div>
              </template>
              <template #right-icon>
                <van-radio name="2" checked-color="#7BFFEC" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="footer">
        <van-icon name="setting-o" size="24px" @click="goSetting" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      tokenId:localStorage.getItem('tokenId'),
      siteId:localStorage.getItem('siteId'),
      pileSn:localStorage.getItem('pileSn'),
      isLoading:false,
      loadPower:'',
      feedin:'',
      inverter:'',
      otherLoad:'',
      chargePower:'',
      chargeStatus:'',
      chargeMode:'',
      chargeEnergy:'',
      chargeDuration:'',
      flow:[],
      showsetting:false,
      mode:'',
      checkBoost:true,
      boostMode:'1',
      startTimeValue:'00:00',
      endTimeValue:'00:00',
      Set_EQValue:'0',
      Set_TimeValue:'00:00',
      fifteenRefresh:null
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/chargerlist'});
    },
    goDetail(){
      this.$router.push({path:'/chargerdetailchart'});
    },
    setting(){
      this.showsetting=true;
    },
    goSetting(){
      sessionStorage.setItem('setFrom','/chargerdetail');
      this.$router.push({path:'/chargersetting'});
    },
    //流动图
    async getFlowChart(){
      this.comm.loadingShow();
      let res = await this.API.getEVdetailChar(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId,
        'pileSn':this.pileSn
      });
      this.inverter=res.systemPower;
      this.feedin=res.feedInPower;
      this.loadPower=res.loadPower;
      this.chargePower=res.chargePower;
      this.otherLoad=this.inverter-this.feedin-this.chargePower;
      this.chargeStatus=res.chargeStatus;
      this.chargeMode=res.chargeMode;
      this.chargeEnergy=res.chargeEnergy;
      this.chargeDuration=res.chargeDuration;
      this.flow=this.comm.EVchar(this.inverter,this.feedin,this.loadPower,this.otherLoad,this.chargePower);
    },
    //获取设置数据
    async getData(){
      this.comm.loadingShow();
      let datas = await this.SETAPI.setGetDataPT(localStorage.getItem('domain'),{'tokenId':localStorage.getItem('tokenId'),'sn':this.sn});
      if(datas.result!=null&&datas.result!="tokenId不合法!"){
        let dataArr=datas.result;
        this.mode=dataArr[1];
        this.checkBoost=dataArr[11]==1?true:false;
        this.boostMode=dataArr[11]+'';
        
        let startTime1Handle= dataArr[12];
        let startTime1Handle1= parseInt(startTime1Handle/256);
        let startTime1Handle2=startTime1Handle%256;
        startTime1Handle1=parseInt(startTime1Handle1)>=10?startTime1Handle1:"0"+startTime1Handle1;
        startTime1Handle2=parseInt(startTime1Handle2)>=10?startTime1Handle2:"0"+startTime1Handle2;
        this.startTimeValue=`${startTime1Handle1}:${startTime1Handle2}`;

        let endTime1Handle= dataArr[13];
        let endTime1Handle1= parseInt(endTime1Handle/256);
        let endTime1Handle2=endTime1Handle%256;
        endTime1Handle1=parseInt(endTime1Handle1)>=10?endTime1Handle1:"0"+endTime1Handle1;
        endTime1Handle2=parseInt(endTime1Handle2)>=10?endTime1Handle2:"0"+endTime1Handle2;
        this.endTimeValue=`${endTime1Handle1}:${endTime1Handle2}`;

        this.Set_EQValue=dataArr[14];

        let Set_TimeValueHandle= dataArr[15];
        let Set_TimeValueHandle1= parseInt(Set_TimeValueHandle/256);
        let Set_TimeValueHandle2=Set_TimeValueHandle%256;
        Set_TimeValueHandle1=parseInt(Set_TimeValueHandle1)>=10?Set_TimeValueHandle1:"0"+Set_TimeValueHandle1;
        Set_TimeValueHandle2=parseInt(Set_TimeValueHandle2)>=10?Set_TimeValueHandle2:"0"+Set_TimeValueHandle2;
        this.Set_TimeValue=`${Set_TimeValueHandle1}:${Set_TimeValueHandle2}`;
      }else{
        this.comm.tipsShow('InvNoResponse');
      }
    },
    //设置mode
    getMode(code){
      this.mode=code;
      let formData=[
        {'reg':2,'val':this.mode}
      ];
      this.comm.setDataPT(1,formData);
    },
    //设置Boos Mode
    updateBoost(){
      if(this.checkBoost){
        let formData=[
          {'reg':11,'val':0}
        ];
        this.comm.setDataPT(1,formData);
      }
    },
    //设置Boost时间
    setTime(code){
      this.boostMode=code;
      if(code==1){
        let StartTimeArr=this.startTimeValue.split(':');
        let EndTimeArr=this.endTimeValue.split(':');
        let formData=[
          {'reg':11,'val':1},
          {'reg':12,'val':parseInt(StartTimeArr[1])*256+parseInt(StartTimeArr[0])},
          {'reg':13,'val':parseInt(EndTimeArr[1])*256+parseInt(EndTimeArr[0])}
        ];
        this.comm.setDataPT(3,formData);
      }else{
        let Set_TimeArr=this.Set_TimeValue.split(':');
        let formData=[
          {'reg':11,'val':2},
          {'reg':14,'val':this.Set_EQValue},
          {'reg':15,'val':parseInt(Set_TimeArr[1])*256+parseInt(Set_TimeArr[0])}
        ];
        this.comm.setDataPT(3,formData);
      }
    },
    onRefresh(){
      this.isLoading=false;
      this.getFlowChart();
    },
  },
  mounted(){
    this.getFlowChart();
    this.fifteenRefresh=setInterval(()=>{
      this.getFlowChart();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
.homeBox_content{
  background: #FFFFFF;
  border-radius: 6px;
  padding: 5px 8px;
  box-shadow: 1px 3px 6px #bbbbbb;
  text-align: left;
  position: relative;
  .tit_1{
    color: #585858;
    font-size: 14px;
    padding: 5px 0;
  }
  .tit_2_sitedetail{
    font-weight: bold;
  }
  .tit_3_sitedetail{
    font-weight: bold;
    color: #F39801;
  }
  .sale{
    position: absolute;
    top:43px;
    right: 2px;
  }
}
.col_l{
  padding:0 8px;
}
.col_r{
  padding-right:8px;
}
.myyuanpan{
  position: relative;
  color: #7A7A7A;
  width: 320px;
  height: 385px;
  margin: 20px auto 0;
  background: url("../../assets/charger.png") no-repeat center;
  background-size: 100% 100%;
}
.myyuanpan_text_1_b{
  width:95px;
  position: absolute;
  top:61px;
  left: 21px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_1_t{
  width:95px;
  position: absolute;
  top:92px;
  left: 21px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_2_b{
  width:95px;
  position: absolute;
  top:61px;
  right: -5px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_2_t{
  width:95px;
  position: absolute;
  top:92px;
  right: -5px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_3_b{
  position: absolute;
  width:95px;
  top:184px;
  right:100px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_4_b{
  position: absolute;
  width:95px;
  top:307px;
  right:202px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_4_t{
  position: absolute;
  width:95px;
  top:344px;
  right:202px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_5_b{
  position: absolute;
  width:95px;
  top:311px;
  right:-6px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.myyuanpan_text_5_t{
  position: absolute;
  width:95px;
  top:344px;
  right:-6px;
  text-align: center;
  color:#505050;
  font-size: 12px;
}
.settingBox{
  width: 90px;
  height: 90px;
  position: absolute;
  z-index: 2;
  bottom:40px;
  right:0;
  .icon{
    position: absolute;
    top:33px;
    right:6px;
  }
}
.Z1 img,.F1 img,.Z2 img,.F2 img,.Z3 img,.F3 img,.Z4 img,.F4 img{
  width: 295px;
  height: 330px;
}
.Z1{
  position: absolute;
  top:14px;
  left: 7px;
  width: 295px;
  height: 330px;
  transform: rotate(7deg)
}
.F1{
  position: absolute;
  top:17px;
  left: 11px;
  width: 295px;
  height: 330px;
  transform: rotate(-75deg)
}
.Z2{
  position: absolute;
  width: 295px;
  height: 330px;
  top: 16px;
  left: 41px;
  transform: rotate(-6deg);
}
.F2{
  position: absolute;
  width: 295px;
  height: 330px;
  top: 18px;
  left: 40px;
  transform: rotate(-6deg);
}
.Z3,.F3{
  position: absolute;
  width: 295px;
  height: 330px;
  top: 142px;
  left: -66px;
  transform: rotate(-7deg);
}
.Z4{
  position: absolute;
  width: 295px;
  height: 330px;
  top: 11px;
  left: 30px;
  transform: rotate(7deg);
}
.F4{
 position: absolute;
  width: 295px;
  height: 330px;
  top: 11px;
  left: 30px;
  transform: rotate(105deg);
}
.echarts-goto-box{
  width: 90%;
  height: 34px;
  margin: 0 auto;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  color: #8c8879;
  font-size: 16px;
  background: #FDD100;
  margin-bottom: 10px;
  .txt{
    font-size: 18px;
    height: 33px;
    line-height: 33px;
  }
  .icon_2{
    font-size: 20px;
    margin: 6px 0 0 20px;
  }
}
.bottomBox{
  padding-bottom: 20px;
  margin-top: 2px;
}
.ChargerDetail{
  .van-overlay{
    z-index: 3;
  }
  .wrapper{
    position: absolute;
    top:100px;
    width: 100%;
    height: 250px;
    .modeBox{
      width: 100%;
      height: 250px;
      position: absolute;
      .innerBox{
        width: 250px;
        height: 250px;
        z-index: 4;
        margin: 0 auto;
        position: relative;
        color: #80FFF8;
        font-weight: bolder;
        background: url("../../assets/mode.png") no-repeat center;
        background-size: 100% 100%;
      }
      .ECO{
        position: absolute;
        top:19px;
        left: 105px;
      }
      .GREEN{
        transform: rotate(-90deg);
        position: absolute;
        top:113px;
        left: -3px;
      }
      .STOP{
        position: absolute;
        top:216px;
        left: 105px;
        color: #FFBC2D;
      }
      .FAST{
        transform: rotate(90deg);
        position: absolute;
        top:113px;
        left: 207px;
      }
      .mode_1{
        position: absolute;
        width: 170px;
        height: 70px;
        top: -2px;
        left: 40px;
        background: url("../../assets/mode1.png") no-repeat center;
        background-size: 100% 100%;
        .ECO_t{
          color: #595253;
          position: absolute;
          top: 21px;
          left: 65px;
        }
      }
      .mode_2{
        position: absolute;
        width: 167px;
        height: 64px;
        top: 93px;
        left: -51px;
        background: url("../../assets/mode1.png") no-repeat center;
        background-size: 100% 100%;
        transform: rotate(-90deg);
        .GREEN_t{
          color: #595253;
          position: absolute;
          top: 15px;
          left: 58px;
        }
      }
      .mode_3{
        position: absolute;
        width: 169px;
        height: 64px;
        top: 183px;
        left: 41px;
        background: url("../../assets/mode2.png") no-repeat center;
        background-size: 100% 100%;
        .STOP_t{
          color: #595253;
          position: absolute;
          top: 33px;
          left: 64px;
        }
      }
      .mode_4{
        position: absolute;
        width: 166px;
        height: 66px;
        top: 92px;
        left: 134px;
        background: url("../../assets/mode1.png") no-repeat center;
        background-size: 100% 100%;
        transform: rotate(90deg);
        .FAST_t{
          color: #595253;
          position: absolute;
          top: 14px;
          left: 60px;
        }
      }
      .click1{
        position: absolute;
        top: 7px;
        left: 67px;
        width: 113px;
        height: 40px;
      }
      .click2{
        position: absolute;
        top: 65px;
        left: 8px;
        width: 32px;
        height: 113px;
      }
      .click3{
        position: absolute;
        top: 204px;
        left: 67px;
        width: 113px;
        height: 40px;
      }
      .click4{
        position: absolute;
        top: 65px;
        left: 208px;
        width: 32px;
        height: 113px;
      }
    }
  }
  .boostBox{
    position: absolute;
    z-index: 4;
    top:380px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    .mode_t{
      width: 100%;
      text-align: left;
      font-weight: bolder;
      .van-cell{
        color: #7BFFEC;
        background: none;
        border-top: 1px solid #7BFFEC;
        .van-switch{
          background-color: #636363;
        }
        .van-switch--on{
          background-color: #7BFFEC;
        }
      }
      .van-cell-group{
        background: none;
      }
      .van-cell::after{
        border: none;
      }
      .van-cell__label{
        color: #7BFFEC;
        .margin{
          margin-top: 6px;
        }
      }
      .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
        border: none;
      }
    }
    .footer{
      width: 100%;
      text-align: right;
      padding-top: 6px;
      color: #7BFFEC;
      border-top: 1px solid #7BFFEC;
    }
  }
}
</style>
